<template>
  <div class="details">
    <header>
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span>{{ detailList.community }}</span>
      <span><van-icon name="share-o" /></span>
    </header>
    <main>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="v in detailList.houseImg" :key="v.houseCode">
          <img :src="v" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="detail_main">
        <h3 class="main_h3">{{ detailList.title }}</h3>
        <div class="main_flex-box">
          <p v-for="v in detailList.tags" :key="v.houseCode">{{ v }}</p>
        </div>
        <div class="main_flex_item">
          <p>
            <span>{{ detailList.price }}/月</span>
            <span>租金</span>
          </p>
          <p>
            <span>{{ detailList.roomType }}</span>
            <span>房型</span>
          </p>
          <p>
            <span>{{ detailList.description }}平米</span>
            <span>面积</span>
          </p>
        </div>
        <div class="main_flex_bottom">
          <div class="am-flexbox-item">
            <p>
              <span>装修：</span>
              <span>{{ detailList.community }}</span>
            </p>
            <p>
              <span>楼层：</span>
              <span>{{ detailList.size }}</span>
            </p>
          </div>
          <div class="am-flexbox-item">
            <p>
              <span>朝向：</span>
              <span>{{ detailList.oriented[0] }}</span>
            </p>
            <p>
              <span>类型：</span>
              <span>{{ detailList.floor }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="detail_map">
        <p><span>小区：</span>{{ detailList.community }}</p>
        <div id="container"></div>
      </div>
      <div
        class="detail_home"
        v-if="detailList.supporting.length ? true : false"
      >
        <p>房屋配套</p>
        <ul>
          <li v-for="v in detailList.supporting" :key="v.houseCode">
            <i class="icon iconfont icon-shouye1"></i>
            <span>{{ v }}</span>
          </li>
        </ul>
      </div>
      <div class="pei">
        <p>房源概况</p>
        <div class="homesdetail">
          <dl>
            <dt>
              <img
                src="https://api-haoke-web.itheima.net/img/avatar.png"
                alt=""
              />
            </dt>
            <dd>
              <p>王女士</p>
              <p>已认证房主</p>
            </dd>
          </dl>
          <span>发消息</span>
        </div>
        <div class="HouseDetail_descText__2JsQa">
          孟邻3周年庆 就要搞00现金 全市精选品质好房 持续分秒递减中...
          详询孟邻管家 晚餐加个定，省去找钥匙的烦恼。 吃饭:
          品牌精装厨房告诉无线路由器，上网购物，看电影，玩撸啊撸，没问题。 4,
          洗漱:我们只用燃气，不品牌商城直购，您将不再为炎炎夏日而烦恼。 6,
          费用公摊: 丁盯智能电表，实时显示，智能核算，我们的时间不是为了争论费用
        </div>
      </div>
      <div class="youlike">
        <p>猜你喜欢</p>
        <div class="main_houselist">
          <dl
            v-for="v in list"
            :key="v.houseCode"
            @click="$router.push(`/details/${v.houseCode}`)"
          >
            <dt>
              <img :src="'http://47.102.145.189:8009' + v.houseImg" alt="" />
            </dt>
            <dd>
              <h3>{{ v.title }}</h3>
              <p>{{ v.desc }}</p>
              <p v-for="(item, index) in v.tags" :key="index">
                <span>{{ item }}</span>
              </p>
              <p>{{ v.price }}元/月</p>
            </dd>
          </dl>
        </div>
      </div>
    </main>
    <footer>
      <p>
        <img src="https://api-haoke-web.itheima.net/img/unstar.png" alt="" />
        收藏
      </p>
      <p>在线咨询</p>
      <p>电话预约</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      detailList: {
        community: "",
        coord: {
          latitude: "",
          longitude: "",
        },
        floor: "",
        houseImg: [],
        oriented: "",
        price: "",
        roomType: "",
        size: "",
        supporting: [],
        tags: [],
        title: "",
        description: "",
        houseCode: "",
      },
      list: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let map = new BMap.Map("container");
      // 创建地图实例
      let point = new BMap.Point(
        this.detailList.coord.latitude,
        this.detailList.coord.longitude
      );
      // 创建点坐标
      map.centerAndZoom(point, 5);
    },
    getDetailList() {
      this.$http.get(`/houses/${this.id}`).then((res) => {
        // console.log(res.data);
        if (res.data.status == 200) {
          this.detailList = res.data.body;
          console.log(this.detailList);
        }
      });
      this.$http
        .get("/houses", {
          params: {
            cityId: window.localStorage.getItem("cityId"),
            start: 20,
            end: 22,
          },
        })
        .then((res) => {
          console.log(res.data.body.list);
          if (res.data.status === 200) {
            this.list = res.data.body.list;
          }
        });
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetailList();
  },
};
</script>

<style scoped>
.youlike {
  margin: 10px 0 0;
  padding: 0 15px;
  background: #fff;
}
.youlike > p {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
.main_flex-box {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  margin: 10px 0;
}
.am-flexbox-item {
  box-sizing: border-box;
  flex: 1 1;
  margin-left: 8px;
  min-width: 10px;
}
.HouseDetail_descText__2JsQa {
  line-height: 1.6;
  padding: 10px 0;
  color: #333;
}
.pei {
  margin: 10px 0;
  padding: 0 10px;
  line-height: 150%;
  background: #fff;
}
.homesdetail {
  position: relative;
}
.homesdetail dl {
  margin-bottom: 10px;
  display: flex;
}
.homesdetail > span {
  position: absolute;
  right: 15px;
  top: 20px;
  color: #33be85;
  border: 1px solid #33be85;
  border-radius: 3px;
  padding: 3px 15px;
}
.homesdetail dl dt {
  width: 52px;
  height: 52px;
  margin: 10px 10px 0 0;
}
.homesdetail dl dt img {
  width: 100%;
  height: 100%;
}
.homesdetail dl dd {
  padding: 15px 0 0 5px;
}
.main_houselist {
  width: 100%;
  height: auto;
}
.main_houselist dl {
  width: 100%;
  padding: 5px 10px;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.main_houselist dl dt {
  flex-shrink: 0;
  width: 120px;
  height: 100px;
  margin-right: 10px;
}
.main_houselist dl dt img {
  width: 100%;
  height: 100%;
}
.main_houselist dl dd {
  line-height: 28px;
}
.main_houselist dl dd h3 {
  font-size: 15px;
  color: #394043;
}
.main_houselist dl dd p:nth-child(2) {
  font-size: 12px;
  color: #afb2b3;
}
.main_houselist dl dd p:nth-child(3) {
  display: flex;
}
.main_houselist dl dd p:nth-child(4) {
  color: #fa5741;
  font-size: 12px;
}
.main_houselist dl dd p:nth-child(3) span {
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
  background: #39becd;
  color: #e1f5f8;
}
.pei > p {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
.am-flexbox-item p span:first-child {
  display: inline-block;
  color: #999;
  padding-right: 5px;
  line-height: 26px;
}
.detail_map {
  margin-top: 10px;
  background: #fff;
}
.detail_home {
  margin-bottom: 10px;
  padding: 0 10px;
  background: #fff;
}
.detail_home ul {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: #fff;
}
.detail_home ul li {
  margin: 10px 0;
  width: 20%;
  line-height: 23px;
  text-align: center;
}
.detail_home ul li i {
  display: block;
}
.detail_home > p {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
#container {
  height: 145px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  background-color: rgb(243, 241, 236);
  color: rgb(0, 0, 0);
  text-align: left;
}
.main_flex-box p {
  color: #39becd;
  background: #e1f5f8;
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
  /* flex: auto; */
}
.map_rect {
  background-color: pink;
  color: #fff;
  padding: 2px 5px;
}
.map_circle {
  width: 100px;
  height: 100px;
  background-color: aqua;
  border: 5px solid #fff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f5f6;
}
.main_flex_bottom {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  font-size: 13px;
}
.main_flex_item {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  margin: 15px 0;
  padding: 15px 0;
}
.main_flex_item p {
  margin-left: 0;
  box-sizing: border-box;
  flex: 1 1;
  text-align: center;
  color: #999;
  line-height: 26px;
  min-width: 10px;
}
.main_flex_item p span:first-child {
  display: block;
  color: #fa5741;
  font-size: 18px;
  font-weight: bolder;
  height: 26px;
  line-height: 26px;
}
.detail_main {
  padding: 15px;
  background: #fff;
}
.main_h3 {
  font-weight: 400;
  font-size: 16px;
  color: #333;
}
.details header {
  /* position: fixed;
  top: 2; */
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #21b97a;
  z-index: 2;
  color: #fff;
}
.details main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
.details footer {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  line-height: 50px;
  border-top: 1px solid #cecece;
  text-align: center;
  font-size: 17px;
  color: #999;
  background-color: #fff;
}
.details footer p {
  flex: 1;
}
.details footer p:first-child {
  border-right: 1px solid #e8e8e9;
}
.details footer p:first-child img {
  width: 16px;
  border-style: none;
}
.details footer p:last-child {
  border-right: 1px solid #e8e8e9;
  background-color: #21b97a;
  margin-left: 8px;
  color: #fff;
}
.my-swipe {
  width: 100%;
  height: 230px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
</style>